<template>
  <div class="container">
    <div class="flex-left">
      <!-- <div class="top-all-box" @click="qryAllArchMainByType(1, 10)">
        <div class="top-left-box">
          <i class="el-icon-folder"></i>
          <span>全部</span>
        </div> -->
      <!-- <div class="top-right-box">
          <i class="el-icon-arrow-up"></i>
        </div> -->
      <!-- </div> -->
      <el-menu
        ref="menu"
        default-active="0"
        class="el-menu-vertical-demo"
        :unique-opened="true"
        @open="handleOpen"
      >
        <!-- <el-submenu index="0">
          <template slot="title">
            <i class="el-icon-folder"></i>
            <span>全部</span>
          </template>
          <div> -->
        <el-submenu
          v-for="(item, index) in menuList"
          :key="index"
          :index="'' + index"
        >
          <template slot="title">
            <i class="el-icon-document-copy" />
            <span>{{ item.archDeptHotName }}</span>
          </template>
          <div v-if="item.cateAndYearDtoList">
            <el-submenu
              v-for="(cateItem, cateIndex) in item.cateAndYearDtoList"
              :key="cateIndex + 100"
              :index="index + '-' + cateIndex"
            >
              <template slot="title">
                <i class="el-icon-tickets" />
                <span>{{ cateItem.archCateName }}</span>
              </template>
              <div v-if="cateItem.yearList">
                <el-menu-item
                  v-for="(yearItem, yearIndex) in cateItem.yearList"
                  :key="yearIndex + 200"
                  :index="index + '-' + cateIndex + '-' + yearIndex"
                  @click="handleYear(yearItem)"
                >{{ yearItem }}</el-menu-item>
              </div>
            </el-submenu>
          </div>
        </el-submenu>
        <!-- </div> -->
        <!-- </el-submenu> -->
      </el-menu>
    </div>
    <div>
      <div class="search-box">
        <span class="margin-left-m">档案名称:</span>
        <el-input
          v-model="searchForm.archTitle"
          placeholder="请输入搜索的知识标题"
          style="width: 200px"
          class="margin-left-m"
          size="small"
          clearable
        />
        <el-button
          class="margin-left-m"
          type="primary"
          size="small"
          @click="qryAllArchMainByType(searchForm.pageNum,searchForm.pageSize)"
        >检索</el-button>
      </div>
      <el-table
        v-loading="isLoading"
        border
        :data="tableData"
        style="width: 70vw; margin-top: 10px"
      >
        <el-table-column
          align="center"
          prop="archMainCode"
          width="200"
          label="档案编号"
        />
        <el-table-column align="center" prop="archTitle" label="档案名称" />
        <el-table-column align="center" prop="archCateCode" label="档案类别">
          <template slot-scope="scope">
            <span
              v-for="(item, index) in categoryOptions"
              v-show="scope.row.archCateCode === item.archCateCode"
              :key="index"
            >{{ item.archCateName }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="archPeriod" label="保管期(月)">
          <template slot-scope="scope">
            <span v-if="scope.row.archPeriod === 0">永久</span>
            <span v-else>{{ scope.row.archPeriod }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" label="归档状态">
          <template slot-scope="scope">
            <span v-if="scope.row.archState === 0" class="warning">预归档</span>
            <span
              v-if="scope.row.archState === 1"
              class="primary"
            >接收待审核</span>
            <span v-if="scope.row.archState === 3" class="danger">驳回</span>
            <span
              v-if="scope.row.archState === 5"
              class="success"
            >归档接受</span>
            <span v-if="scope.row.archState === 10" class="info">档案封存</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="visitCount" label="浏览次数" />
        <el-table-column align="center" prop="borrowCount" label="借阅次数" />
        <el-table-column align="left" fixed="right" label="操作" width="230">
          <template slot-scope="scope">
            <el-button size="mini" @click="detail(scope.row)">详情</el-button>
            <el-button
              v-if="scope.row.haveDetail === '1'"
              size="mini"
              type="primary"
              plain
              @click="knowDetail(scope.row)"
            >知识化</el-button>
            <el-button
              type="primary"
              size="mini"
              @click="borrow(scope.row)"
            >借阅</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page.sync="searchForm.pageNum"
          :page-sizes="[10, 20, 50]"
          :page-size="searchForm.pageSize"
          layout="sizes,total,  prev, pager, next"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog title="详情" :visible.sync="detailDialog" width="45%">
      <el-form :model="selectRow" label-position="right" label-width="140px">
        <!-- <el-form-item label="档案交付单位">
      <span>{{ selectRow.delivUnit }}</span>
    </el-form-item> -->
        <!-- <el-form-item label="档案分类">
      <span>{{ selectRow.archCateName }}</span>
    </el-form-item> -->
        <el-form-item label="档案名称">
          <div class="item-div">{{ selectRow.archTitle }}</div>
        </el-form-item>
        <el-form-item label="档案编号">
          <div class="item-div">{{ selectRow.archMainCode }}</div>
        </el-form-item>
        <el-form-item label="热点标签">
          <el-tag v-if="selectRow.archDeptHotName" type="success">{{
            selectRow.archDeptHotName
          }}</el-tag>
          <span v-else>暂无热点标签</span>
        </el-form-item>
        <el-form-item label="档案保管期(月)">
          <div class="item-div">
            {{ selectRow.archPeriod === 0 ? "永久" : selectRow.archPeriod }}
          </div>
        </el-form-item>
        <el-form-item label="备注">
          <el-input
            v-if="selectRow.notes"
            v-model="selectRow.notes"
            class="input form-width"
            type="textarea"
            :rows="3"
          />
          <span v-else>暂无备注</span>
        </el-form-item>
        <!-- <el-form-item label="档案规范其他需求">
    <el-input v-model="addForm.archRequireOther"></el-input>
  </el-form-item> -->
        <el-form-item label="档案附件">
          <span
            v-for="item in fileList"
            :key="item.archFilesId"
            type="primary"
            style="display: block"
          >{{ item.fileName }}</span>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="detailDialog = false">关闭</el-button>
      </div>
    </el-dialog>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
      <div style="text-align: center">
        <el-form
          :model="addArchApplicationForm"
          label-width="80px"
          label-position="right"
        >
          <el-form-item label="借阅天数" style="text-align: left">
            <el-input-number
              v-model="addArchApplicationForm.during"
              :step="12"
              style="width: 50%"
              oninput="this.value = this.value.replace(/[^0-9]/g, '');"
              placeholder="0为永久"
            />
            <span style="margin-left: 10px">天</span>
          </el-form-item>
          <el-form-item label="备注">
            <el-input
              v-model="addArchApplicationForm.notes"
              type="textarea"
              :rows="3"
            />
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="handleSubmitDuring()"
        >确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog title="知识化" :visible.sync="readDialogVisible" width="70%">
      <div class="detail-box">
        <div>
          档案编号:
          <span class="right-content">{{ labelDetailItem.archMainCode }}</span>
        </div>
        <div class="detail-content-box">
          <div class="detail-content-left">档案标题:</div>
          <div v-if="labelDetailItem.list.total > 0" class="lbl-content">
            <div
              class="detail-content-right detail-left"
              v-html="labelDetailItem.item.lblContent"
            />
            <div class="detail-label-box">
              <div
                v-for="(label, labelIndex) in labelDetailItem.list.records"
                :key="labelIndex"
                :style="{ border: '1px solid' + label.labelColor }"
                class="detail-label-item-box"
                @click="clickLabel(label)"
              >
                <div class="label-top-box">
                  <div
                    class="label-color-box"
                    :style="{ background: label.labelColor }"
                  />
                  <div>
                    {{ label.labelName }}
                  </div>
                </div>
                <div class="detail-label-content" :title="label.lblContent">
                  {{ label.lblContent }}
                </div>
              </div>
            </div>
          </div>
          <div
            v-else
            class="detail-content-right"
            v-html="labelDetailItem.item.lblContent"
          />
        </div>
        <div>
          备注:
          <span class="right-content">{{
            labelDetailItem.notes ? labelDetailItem.notes : "暂无备注"
          }}</span>
        </div>
      </div>
      <div slot="footer">
        <el-button @click="readDialogVisible = false">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { qryMyDeptArchMain, qryMyDeptArchMainByType } from '@/api/mineDigiArch'
import { getAllCategory } from '@/api/archCategory'
import { qryAllArchMainByType, updateCount, queryFilesById } from '@/api/archManage'
import { addArchApplication } from '@/api/archApplication'
import { getSingleLabelMain } from '@/api/knowMan'
export default {
  data() {
    return {
      menuList: [
        {
          archDeptHotName: '',
          cateAndYearDtoList: [
            {
              archCateName: '',
              yearList: []
            }
          ]
        }
      ],
      searchForm: {
        year: '', // 返回的年份
        hotPoint: '', // 返回的热点标签
        cateName: '', // 返回的档案分类
        archTitle: '', // 档案标题
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      tableData: [],
      isLoading: false,
      categoryOptions: [],
      detailDialog: false,
      selectRow: {},
      fileList: [],
      dialogVisible: false,
      addArchApplicationForm: {
        during: '',
        notes: ''
      },
      row: {},
      readDialogVisible: false,
      labelDetailItem: {
        list: {
          total: 0

        },
        item: {
          lblContent: ''
        }
      }
    }
  },
  created() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.getMyDeptArchMain()
    this.getAllCategory()
    this.qryAllArchMainByType(1, 10)
    // this.getMyDeptArchMainByType()
  },
  methods: {
    // 查询我的部门档案分类树
    getMyDeptArchMain() {
      qryMyDeptArchMain({
        deptCode: this.userInfo.archDeptCode
      }).then((res) => {
        this.menuList = res.data
      })
    },
    // 获取分类列表
    getAllCategory() {
      getAllCategory({
        pageNum: -1,
        pageSize: -1
      }).then((res) => {
        if (res.code === '0') {
          const list = [
            {
              archCateCode: '',
              archCateName: '全部',
              archCateId: '',
              archRequireOther: '',
              createtime: '',
              archCateType: 0,
              notes: ''
            }
          ]
          this.categoryOptions = list.concat(res.data.records)
        }
      })
    },
    // 获取全部档案
    qryAllArchMainByType(pageNum, pageSize) {
      //   this.$refs.menu.closeMenu(this.$refs.menu.openedMenus[0])
      //   this.$refs.menu.activeIndex = null
      this.isLoading = true
      const param = {
        archTitle: this.searchForm.archTitle,
        archCateCode: '',
        archPeriod: -1,
        archDeptCode: this.userInfo.archDeptCode,
        username: '',
        staffCode: '',
        visitCount: 0,
        borrowCount: 0,
        submitYear: '',
        archDeptHotName: '',
        pageNum: pageNum,
        pageSize: pageSize,
        archState: 5,
        accessState: 0
      }
      qryAllArchMainByType(param).then((res) => {
        this.tableData = res.data.records
        this.total = res.data.total
        this.isLoading = false
      })
    },
    // 获取右边的数据列表
    getMyDeptArchMainByType() {
      this.isLoading = true
      qryMyDeptArchMainByType({
        ...this.searchForm,
        deptCode: this.userInfo.archDeptCode
      }).then((res) => {
        if (res.code === '0') {
          this.tableData = res.data.records
          this.total = res.data.total
          this.isLoading = false
        }
      })
    },
    // 点击年份
    handleYear(year) {
      this.searchForm.year = year
      this.getMyDeptArchMainByType()
    },
    // 点击展开目录
    handleOpen(key, keyPath) {
      const path = keyPath[keyPath.length - 1]
      const menu = path.split('-')
      if (menu.length === 2) {
        this.searchForm.hotPoint = this.menuList[menu[0]].archDeptHotName
        this.searchForm.cateName = this.menuList[menu[0]].cateAndYearDtoList[menu[1]].archCateName
        // this.getMyDeptArchMainByType()
        // return
      }
      //   if (menu.length === 1) {
      //     this.searchForm.hotPoint = this.menuList[menu[0]].archDeptHotName
      //     this.getMyDeptArchMainByType()
      //   }
    },
    // 点击详情
    detail(row) {
      this.isLoading = true
      // 更新浏览和借阅次数
      updateCount({ type: 1, archMainId: row.archMainId })
      this.selectRow = row
      queryFilesById({ archMainCode: row.archMainCode })
        .then((res) => {
          if (res.code === '0') {
            this.fileList = res.data
          }
        })
        .finally(() => {
          this.detailDialog = true
          this.isLoading = false
        })
    },
    // 点击借阅
    borrow(row) {
      this.row = row
      this.dialogVisible = true
    },
    // 发起借阅
    handleSubmitDuring() {
      if (this.addArchApplicationForm.during) {
        addArchApplication({
          ...this.addArchApplicationForm,
          staffCode4App: this.userInfo.username
            ? this.userInfo.username
            : this.userInfo.staffCode,
          appState: 0,
          archMainId: this.row.archMainId,
          archMainCode: this.row.archMainCode
        }).then((res) => {
          if (res.code === '0') {
            this.$message({
              type: 'success',
              message: '已发起借阅申请，请联系负责人进行审核'
            })
            this.dialogVisible = false
          }
        })
        return
      }
    },
    // 点击打开知识化的内容
    knowDetail(row) {
      getSingleLabelMain({
        archLblId: row.archLblId
      }).then((res) => {
        this.readDialogVisible = true
        this.labelDetailItem = { ...res }
      }).catch((err) => {
        console.log(err)
      })
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val
      if (this.searchForm.year === '') {
        this.qryAllArchMainByType(this.searchForm.pageNum, val)
        return
      }
      this.getMyDeptArchMainByType()
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val
      if (this.searchForm.year === '') {
        this.qryAllArchMainByType(val, this.searchForm.pageSize)
        return
      }
      this.getMyDeptArchMainByType()
    }
  }
}
</script>

<style scoped>
.container {
  display: flex;
  margin: 20px 0;
}
.flex-left {
  width: 20%;
}
.search-box {
  display: flex;
  align-items: center;
  color: rgb(96, 98, 102);
  font-size: 15px;
}
.margin-left-m {
  margin-left: 10px;
}
.top-all-box {
  display: flex;
  justify-content: space-between;
  padding: 0 20px 0 10px;
  height: 37px;
  line-height: 37px;
  margin-top: 8px;
  cursor: pointer;
}
.top-all-box:hover {
  background: #eaf4fe;
}
.top-left-box i {
  color: #666;
  font-size: 18px;
  margin-right: 5px;
}
.top-left-box span {
  font-size: 14px;
}
.top-right-box i {
  color: #909399;
  font-size: 12px;
}
.pagination {
  width: auto;
  display: flex;
  margin-top: 10px;
  align-items: center;
}
div /deep/ .el-menu {
  border: none;
}
div /deep/ .el-submenu__title {
  height: 37px;
  line-height: 37px;
  color: #333;
}
div /deep/ .el-submenu .el-menu-item {
  height: 37px;
  line-height: 37px;
}

.detail-box {
  font-size: 16px;
  line-height: 30px;
}
.right-content {
  margin-left: 8px;
}
.detail-content-box {
  display: flex;
}
.detail-content-left {
  width: auto;
  white-space: nowrap;
  margin-right: 10px;
}
.detail-content-right {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 7px 10px;
}
.lbl-content {
  display: flex;
  width: 100%;
}
.detail-left {
  min-width: 50%;
  display: flex;
  align-items: center;
}
.detail-label-box {
  min-width: 200px;
}
.detail-label-item-box {
  padding: 5px 10px;
  border-radius: 10px;
  margin-bottom: 4px;
  margin-left: 10px;
}
.label-top-box {
  display: flex;
  align-items: center;
}
.label-color-box {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  margin-right: 10px;
}
.detail-label-content {
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  font-size: 13px;
  line-height: 26px;
}

.file-box {
  display: flex;
  align-items: center;
}
.download-file {
  color: #409eff;
  cursor: pointer;
}
.label-detail-box {
  font-size: 18px;
  font-weight: bold;
  height: 30px;
  line-height: 30px;
}

</style>
